<template>
  <div class="app-container">
    <div class="zd3">
      <div class="zd3-title">
        <p>
          <span>设备名称</span>
          <input v-model="search.brand" type="text" placeholder="请输入设备名称" />
        </p>
        <p>
          <span>检修人</span>
          <input v-model="search.maintainPerson" type="text" placeholder="请输入检修人" />
        </p>
        <h3 @click="getList">查询</h3>
        <h4 @click="resetList">重置</h4>
				<!-- <h3 @click="addpeople" style="background: #0093FF">新增</h3> -->
      </div>
      <!-- <el-tabs type="border-card">
        <el-tab-pane label="分类">

        </el-tab-pane>
        <el-tab-pane label="分类"></el-tab-pane>
        <el-tab-pane label="分类"></el-tab-pane>
      </el-tabs> -->
      <div class="zd3-btm">
        <el-table
          :data="tableData"
          style="width: 100%;border-radius: 8px;"
          :show-header="showHeader"
          border
        >
          <el-table-column type="index" align="center" label="序号" width="80" />
          <el-table-column align="center" width="100" prop="bitNumber" label="设备序列号" />
          <el-table-column align="center" prop="brand" label="设备名称" />
          <el-table-column align="center" prop="model" label="设备型号" />
          <el-table-column align="center" width="200" prop="powers" label="性能参数">
            <template slot-scope="scope">
							<div class="ellisp">{{scope.row.powers}}</div>
						</template>
          </el-table-column>
          <el-table-column align="center" prop="maintainPerson" label="检修人" />
          <el-table-column align="center" prop="texture" label="保养类型" />
          <el-table-column align="center" prop="lubrication" label="润滑方式" />
          <el-table-column align="center" prop="number" label="数量" />
          <!-- <el-table-column align="center" width="200" label="提交内容">
            <template slot-scope="scope">
              <div class="ellisp">{{scope.row.submitContent}}</div>
            </template>
          </el-table-column> -->
          <el-table-column align="center" width="250" label="操作" fixed="right">
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" @click="look(scope.row)">查看</el-button> -->
              <el-button type="text" size="small" v-if="scope.row.fileId" @click="downloadFile(scope.row,scope.$index)">下载文档</el-button>
              <el-button type="text" size="small" @click="write(scope.row,scope.$index)">编辑</el-button>
              <el-popconfirm
                placement="top"
                hideIcon
                title="是否要删除此行？"
                @onConfirm="deleteRow(scope.row)"
              >
                <el-button type="text" size="small" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          hide-on-single-page
          layout="prev, pager, next"
          :total="total"
          :page-size="50"
          @current-change="goPage"
          @prev-click="goPrev"
          @next-click="goNext"
        />
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      :modal="true"
      :close-on-click-modal="false"
      width="70%"
    >
      <div class="change">
        <p>
          <span>设备序列号</span>
          <input v-model="tempData.bitNumber" type="text" placeholder="请输入设备序列号"/>
        </p>
        <p>
          <span>设备名称</span>
          <input v-model="tempData.brand" type="text" placeholder="请输入设备名称" />
        </p>
        <p>
          <span>设备型号</span>
          <input v-model="tempData.model" type="text" placeholder="请输入设备型号" />
        </p>
        <p>
          <span>性能参数</span>
          <input v-model="tempData.powers" type="text" placeholder="请输入性能参数" />
        </p>
        <p>
          <span>检修人</span>
          <input v-model="tempData.maintainPerson" type="text" placeholder="请输入检修人" />
        </p>
        <p>
          <span>保养类型</span>
          <input v-model="tempData.texture" type="text" placeholder="请输入保养类型" />
        </p>
        <p>
          <span>润滑方式</span>
          <input v-model="tempData.lubrication" type="text" placeholder="请输入润滑方式" />
        </p>
        <p>
          <span>数量</span>
          <input v-model="tempData.number" type="number" placeholder="请输入数量" />
        </p>
      </div>
      <div class="fileup">
        <div class="uping">
          <p>
            <span>上传资料</span>
            <el-upload
              class="upload-demo"
              drag
              :show-file-list="false"
              :http-request="designUpFile"
              action=""
              :multiple='false'
              limit='1'
              >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
            <p style="margin: 0;">
              <strong v-if="tempData.fileId">{{tempData.fileId}}</strong>
              <strong v-if="tempData.fileId" @click="downLoad(tempData.fileId)">下载<i class="el-icon-download" /></strong>
            </p>
          </p>
          <!-- <i class="el-icon-close delete" @click="deleteFile(item)"></i> -->
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateChildrenDepartment,deleteChildrenDepartment,getChildrenDepartment } from "@/api/bumen";
import { uploadFile,addPeople,getUserFiles } from '@/api/people'
let fatherid = null,templist = null;
export default {
  data() {
    return {
      content: "",
      search: {
        brand: null,
        maintainPerson: null
      },
      total: 1,
      showHeader: true,
      loading: true,
      tableData: [],
      dialogVisible: false,
      tempData: "",
      tempIndex: -1
    }
  },
  mounted() {
    const options = JSON.parse(this.$route.params.options);
    console.log(options)
    fatherid = options.id
    this.getList()
    // templist = options.departmentSubfacilities;
    console.dir(this.tableData);
  },
  methods: {
    downloadImg(item) {
      window.open(item.imgurl);
    },
    downloadFile(item) {
      window.location.href = item.fileId;
    },
    look(item) {
      this.$router.push({
        name: "WriteRepairdeclare",
        params: {
          options: JSON.stringify(item),
          look: true
        }
      });
    },
    write(item, index) {
      console.log(item);
      this.tempData = {...item};
      this.tempIndex = index
      this.dialogVisible = true
    },
    deleteRow(item) {
      console.log("删除");
      console.log(item);
      deleteChildrenDepartment(item.id).then(res => {
        console.log(res);
        this.$message({
          showClose: true,
          message: res.message,
          type: "success"
        });
        this.getList();
      });
    },
    getList(){
      getChildrenDepartment({
        departFacilityId: fatherid,
        brand: this.search.brand,
        maintainPerson: this.search.maintainPerson
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records;
      })
    },
    goPage(page) {
      this.search.currentPage = page;
      this.getList();
    },
    goPrev(page) {
      this.search.currentPage--;
      this.getList();
      // console.log(page);
    },
    goNext(page) {
      this.search.currentPage++;
      this.getList(fatherid);
      // console.log(page);
    },
    resetList() {
      this.search = {}
    },
    designUpFile(item) {
      console.log('新增文档')
      const loading = this.$loading({
        lock: true,
        text: '上传中请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)'
      })
      console.log(item)
      var formData = new FormData()
      formData.append("file", item.file)
      // formData.append('content', this.fileNum[item.data].filename)
      uploadFile(formData).then(res => {
        console.log(res)
        this.tempData.fileId = res
        this.$forceUpdate()
        loading.close()
      })
    },
    save(){
      // console.log(item)
      delete this.tempData.insertTime
      delete this.tempData.updateTime
      // this.tempData.id = fatherid
      updateChildrenDepartment(this.tempData).then(res => {
        console.log(res)
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.dialogVisible = false
        this.getList()
      })
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
}
.ellisp {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-align: left;
}
.app-container {
  padding: 10px;
}
.rolestip {
  width: 100%;
  display: flex;
  justify-content: center;
}
.inps {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: none;
  border: none;
  color: #333;
}
.inps-active {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  // background:#ccc;
  border: none;
  color: #333;
}
.s-img {
  width: 80px;
  height: 80px;
}
.ellisp{
	width: 100%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-align: left;
}
.zd3-title {
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);

  > p {
    font-size: 14px;
    color: #333;
    margin-right: 30px;

    > span {
      padding-right: 20px;
    }

    > input {
      width: 200px;
      height: 32px;
      // background: #ccc;
      border-radius: 3px;
      border: 1px solid #ccc;
      padding-left: 10px;
      color: #333;
    }
  }

  > h3 {
    width: 64px;
    height: 32px;
    background: #18a05e;
    border-radius: 3px;
    margin: 0 30px 0 0;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
  }

  > h4 {
    width: 64px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
    margin-right: 30px;
  }
}
.zd3-btm /deep/.btn-prev:after {
  content: "上一页";
}
.zd3-btm /deep/.btn-next:before {
  content: "下一页";
}
.zd3-btm /deep/.btn-prev,
.zd3-btm /deep/.btn-next {
  width: 65px;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .el-pagination {
    white-space: nowrap;
    padding: 15px 5px;
    color: #303133;
    font-weight: bold;
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.25);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.change {
  display: flex;
  flex-wrap: wrap;
  > p {
    width: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
.fileup{
    position: relative;
    // padding: 20px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-wrap: wrap;
    // align-items: center;
    justify-content: space-between;
    .uping{
			width: 55%;
			position: relative;
      display: flex;
      flex-wrap: wrap;
			flex-direction: column;
			&:hover .delete{
				display: block;
			}
      > p {
        width: 90%;
        font-size: 14px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        color: #333;
        /deep/.el-input__inner {
          // width: inherit;
          background: none;
          height: 32px;
          // line-height: 32px;
          color: #333;
          border: 1px solid rgba(0, 0, 0, 0.1);
          padding: 0 25px;
        }
        /deep/.el-input__icon {
          line-height: 32px;
        }
        /deep/.el-upload-dragger {
          width: 100%;
          height: 100px;
        }
        /deep/.el-upload-dragger .el-icon-upload {
          font-size: 60px;
          color: #C0C4CC;
          margin: 0; 
          line-height: 1;
          width: 100%;
        }
        /deep/.el-upload {
          width: 100%;
        }
        .userselect {
          // max-width: 250px;
          flex: 1;
        }
      
        > span {
          display: block;
          width: 100px;
          text-align: right;
          padding-right: 15px;
        }
        > input {
          width: inherit;
          flex: 1;
          height: 32px;
          border-radius: 3px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          padding-left: 10px;
          color: #333;
        }
        >strong{
          display: inline-block;
          padding-left: 100px;
          font-weight: 100;
          font-size: 14px;
          &:last-child{
            cursor: pointer;
            color: #13ce66;
            font-weight: 600;
          }
        }
        >div{
          width: inherit;
          flex: 1;
        }
			}
			.delete{
				position: absolute;
				z-index: 99;
				top: 0px;
				right: 10px;
				cursor: pointer;
				transition: all .5s;
				display: none;
			}
    }
  }
</style>
